<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=535,maximum-scale=0.765, user-scalable=no">




  <title>To Do List</title>
  <link rel="icon" type="image/png" href="https://pic60.mac89.com/mac69/ico/202007/14172319_6ecf2632b2.png">
  <style>
    body {
      /* 上方参数，宽度和缩放分别控制安卓和iPhone的页面。调整时每次调整0.05 */
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 50px auto;
    }

    /* 修改列表样式2023.02.26 */

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    input[type="text"] {
      position: fixed;
      left: 50%;
      width: 485px;
      height: 20px;
      padding: 10px;
      margin-bottom: -10px;
      font-size: 16px;
      border-radius: 8px;
      border: 2px solid rgb(68, 68, 68);
      box-shadow: none;
      transition: border-color 0.2s ease-in-out;
      margin-left: -255px;
    }

    input[type="text"]:focus {
      outline: none;
      border: 2px solid;
      border-color: rgb(68, 68, 68);
      box-shadow: 0 0 10px #c4c4c4;
    }

    /* 标题 */

    h4.todo {
      position: fixed;
      left: 50%;
      top: 115px;
      transform: translate(-50%, 0);
      color: rgb(83, 83, 83);
      margin-left: -223px;
    }

    h4.completed {
      color: rgb(216, 216, 216);
      position: fixed;
      left: 50%;
      top: 410px;
      transform: translate(-50%, 0);
      margin-left: -204px;
      
    }





    #todo-list {
      /* To Do列表的高度 宽度 左边距 */
      position: fixed;
      left: 50%;
      top: 162px;
      transform: translate(-50%, 0);
      width: 500px;
      height: 233px;
      /* 设置列表的高度 */
      overflow-y: scroll;
      /* 添加纵向滚动条 */
      margin-left: 0px;
    }

    /* 修改待办事项列表项样式 */

    #todo-list li {
      padding: 8px;
      font-size: 16px;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* 列表前圆点*/
    #todo-list li::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 10px;
      background-color: rgb(94, 94, 94);
    }

    /* 时间样式 */

    #todo-list li span:nth-child(2) {
      color: #ccc;
      font-size: 17px;
      margin-right: 10px;
    }

    #completed-list li span:nth-child(2) {
      color: #ccc;
      font-size: 17px;
      margin-right: 10px;
    }

    /* 修改已完成事项列表项样式 */

    #completed-list {
      position: fixed;
      left: 50%;
      top: 450px;
      bottom: 70px;
      /* 新增 */
      transform: translate(-50%, 0);
      width: 500px;
      /* 设置列表的高度 */
      /* 删除纵向滚动条 */
      margin-left: 0px;
      max-height: 234px;
      overflow-y: auto;
      /* 添加自适应滚动条 */
      overflow-x: hidden;
    }

    #completed-list li {
      padding: 8px;
      font-size: 16px;
      border-bottom: 1px solid #eeeeee;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }


    button {
      background-color: #fffffff1;
      font-size: 16px;
      color: rgb(194, 194, 194);
      border: none;
      padding: 5px 5px;
      /* 距离边框 距离相邻元素 */
      border-radius: 5px;
      cursor: pointer;
      margin-left: 0px;
      /* 删除按钮 距离 完成按钮 */
    }




    /* 滚动条样式1 */

    #completed-list-wrapper {
      position: relative;
      left: 30px;
    }

    #completed-list {
      scrollbar-width: thin;
      /* 添加滚动条宽度 */
    }

    #completed-list::-webkit-scrollbar {
      width: 8px;
    }

    #completed-list::-webkit-scrollbar-track {
      background-color: #fdfdfd;
    }

    #completed-list::-webkit-scrollbar-thumb {
      background-color: rgb(238, 238, 238);
      border-radius: 10px;
    }

    #completed-list::-webkit-scrollbar-thumb:hover {
      background-color: rgb(207, 207, 207);
    }

    /* 滚动条样式2 */

    #todo-list-wrapper {
      position: relative;
      left: 30px;
    }

    #todo-list {
      scrollbar-width: thin;
      /* 添加滚动条宽度 */
    }

    #todo-list::-webkit-scrollbar {
      width: 8px;
    }

    #todo-list::-webkit-scrollbar-track {
      background-color: rgb(255, 255, 255);
    }

    #todo-list::-webkit-scrollbar-thumb {
      background-color: rgb(238, 238, 238);
      border-radius: 10px;
    }

    #todo-list::-webkit-scrollbar-thumb:hover {
      background-color: rgb(207, 207, 207);
    }

    /* 滚动条结束 */
    /* 输入框文字隐藏与显示 */

    #new-item:focus::placeholder {
      color: transparent;
    }

    #new-item:not(:focus)::placeholder {
      color: #999;
    }

    /* 发送图标按钮 */
    button#icon {
      position: fixed;
      left: 50%;
      top: 55px;
      background-color: rgba(255, 255, 255, 0);
      color: rgb(92, 92, 92);
      border: none;
      padding: 5px 5px;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 213px;
      font-size: 18px;
    }

    /* 设置功能的图标 */
    #settings-icon1 {
      position: fixed;
      top: 135px;
      left: 50%;
      font-size: 19px;
      cursor: pointer;
      margin-left: 230px;
      color: #1850a3;
    }

    #settings-dropdown {
      display: none;
      position: fixed;
      top: 160px;
      left: 50%;
      background-color: #fff;
      border: 1px solid #cacaca;
      padding: 15px;
      margin-left: 105px;
      border-radius: 8px;
      /* 水平 垂直 模糊范围*/
      box-shadow: 0px 0px 5px 0 rgba(163, 163, 163, 0.5);
    }

    #settings-dropdown div:hover {
      cursor: pointer;
    }

    #settings-dropdown.show {
      display: block;
    }

    /* 设置功能的图标 over*/



    /* icon2隐藏已完成列表*/
    #settings-icon2 {
      color: rgb(141, 141, 141);
      position: fixed;
      top: 430px;
      left: 50%;
      font-size: 18px;
      cursor: pointer;
      margin-left: 229px;
    }

    #completed-list {
      display: block;
    }

    #settings-icon2 i.fa-eye-slash {
      display: none;
    }

    #settings-icon2.active i.fa-eye-slash {
      display: block;
    }

    #settings-icon2.active i.fa-eye {
      display: none;
    }

    /* 隐藏已完成列表over*/



    .copyright {
      white-space: nowrap;
      font-size: 12px;
      position: fixed;
      left: 50%;
      bottom: 14px;
      transform: translate(-50%, 0);
      color: rgb(206, 206, 206);
    }
  </style>

  </style>
</head>

<body>


  <div style="text-align:center">
    <input type="text" id="new-item" placeholder="输入待办事项，Enter键保存">
    <button id="icon"><i class="far fa-paper-plane"></i></button>
  </div>
  <h4 class="todo"><i class="fas fa-mug-hot"></i> To do</h4>
  <ul id="todo-list"></ul>

  <h4 class="completed"><i class="fas fa-check-square"></i> Completed</h4>
  <ul id="completed-list"></ul>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
    integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

  <div style="text-align:center;
    color: rgb(206, 206, 206);
    font-size: 14px; 
    left: 50%;
    margin-left: -187px;
    position:fixed;
    top:138px;">- <span id="todo-item-count"></span></div>

<div id="completed-item-count" style="text-align:center;
color: rgb(206, 206, 206);
font-size: 14px; 
left: 50%;
margin-left: -150px;
position:fixed;
top:433px;"><span></span></div>



  <div id="settings-icon1"><i class="fas fa-list-ul"></i></div>

  <div id="settings-dropdown">
    <div style="font-size: 16px; margin-bottom: 10px;margin-top: -1px;"><i class="far fa-copy"></i> 复制全部待办</div>
    <div id="option-three" style="font-size: 16px; margin-bottom: 10px;" ><i class="far fa-sticky-note"></i> 使用说明</div>
    <div id="option-3"style="font-size: 16px; margin-bottom: 10px;"><i class="fas fa-dove"></i> 加入我</div>
    <div style="font-size: 16px; margin-bottom: 4px;"><i class="far fa-paper-plane"></i> 反馈与建议</div>
  </div>




  <div id="settings-icon2">
    <i class="far fa-eye"></i>
    <i class="far fa-eye-slash"></i>

  </div>

  <div style="position: fixed; 
  white-space: nowrap;
  left: 50%; 
  bottom: 30px; 
  font-size: 12.2px;
  transform: translate(-50%, 0); 
  color: rgb(206, 206, 206);">推荐PC端使用 | by @Chat GPT</div>

  <div class="copyright">
    Copyright © 2022 - 2023 Spenser. All Rights Reserved.
  </div>

  <script>
    let todoList = [];
    let completedList = [];

    const newItemInput = document.getElementById('new-item');
    const addButton = document.getElementById('icon'); // add的图标
    const todoListElement = document.getElementById('todo-list');
    const completedListElement = document.getElementById('completed-list');
    let isCompletedListHidden = false;

    const completedItemCountElement = document.getElementById('completed-item-count');// 完成计数
    const todoItemCountElement = document.getElementById('todo-item-count');// 待办计数



    const settingsIcon2 = document.getElementById('settings-icon2');// 隐藏完成列表

    settingsIcon2.addEventListener('click', function () {
      isCompletedListHidden = !isCompletedListHidden;
      if (isCompletedListHidden) {
        completedListElement.style.display = 'none';
        document.querySelector('.completed').style.display = 'none'; // 隐藏 "Completed" 标题
        completedItemCountElement.style.display = 'none';
        settingsIcon2.classList.add('active');
      } else {
        completedListElement.style.display = 'block';
        document.querySelector('.completed').style.display = 'block'; // 显示 "Completed" 标题
        completedItemCountElement.style.display = 'block';
        settingsIcon2.classList.remove('active');
      }

    });




    const settingsIcon = document.getElementById('settings-icon1');// 创建设置按钮
    const settingsDropdown = document.getElementById('settings-dropdown');// 创建设置按钮下的弹出

    addButton.addEventListener('click', function () {// 点击add按钮，输入框不失去焦点
      newItemInput.focus();
    });


    settingsDropdown.children[0].addEventListener('click', function () {
      // 1复制待办事项列表
      const todoText = todoList.map(item => item.text).join('\n');
      navigator.clipboard.writeText(todoText);
      // 弹出 toast 提示
      const toast = document.createElement('div');
      toast.textContent = '复制成功';
      toast.style.position = 'fixed';
      toast.style.top = '200px';
      toast.style.left = '50%';
      toast.style.transform = 'translate(-50%, 0)';
      toast.style.padding = '10px 20px';
      toast.style.backgroundColor = '#000';
      toast.style.color = '#fff';
      toast.style.borderRadius = '5px';
      document.body.appendChild(toast);
      setTimeout(() => {
        document.body.removeChild(toast);
      }, 1000);
      settingsDropdown.classList.remove('show');
    });


    settingsDropdown.children[3].addEventListener('click', function () {
      // 4反馈与建议
      settingsDropdown.classList.remove('show');
      window.location.href = 'https://www.wjx.top/vm/PXRrUV0.aspx#';
    });



    const optionThree = document.getElementById('option-three');
    optionThree.addEventListener('click', function () {
      // 创建弹窗
      const popup = document.createElement('div');
      popup.style.position = 'fixed';
      popup.style.width = '270px';
      popup.style.top = '400px';
      popup.style.left = '50%';
      popup.style.transform = 'translate(-50%, -50%)';
      popup.style.padding = '20px';
      popup.style.backgroundColor = '#fff';
      popup.style.border = '1px solid #ccc';
      popup.style.borderRadius = '15px';
      popup.style.lineHeight = '1.7';
      popup.style.boxShadow = '0px 0px 5px 0px rgba(163, 163, 163, 0.5)';


      document.body.appendChild(popup);

      // 创建文字
      const text1 = document.createElement('div');
      text1.textContent = '1. 注意：';
      popup.appendChild(text1);

      const text2 = document.createElement('div');
      text2.textContent = '● 数据不支持云端同步';
      popup.appendChild(text2);

      const text4 = document.createElement('div');
      text4.textContent = '● 清理缓存to do list数据也会被清理！';
      text4.style.marginBottom = '10px';
      popup.appendChild(text4);

      const text5 = document.createElement('div');
      text5.textContent = '2. 功能：点击待办可复制（安卓手机暂不支持）。';
      text5.style.marginBottom = '10px';
      popup.appendChild(text5);

      const text6 = document.createElement('div');
      text6.textContent = '3. 推荐在PC端使用。';
      text6.style.marginBottom = '20px';
      popup.appendChild(text6);

      // 创建按钮
      const button = document.createElement('button');
      button.textContent = '确定';
      button.style.backgroundColor = '#383838';
      button.style.color = '#fff';
      button.style.border = 'none';
      button.style.padding = '10px';
      button.style.display = 'block';
      button.style.margin = '0 auto';
      popup.appendChild(button);

      // 点击按钮关闭弹窗
      button.addEventListener('click', function () {
        document.body.removeChild(popup);
      });


      // 隐藏下拉选项
      settingsDropdown.classList.remove('show');
    });



   // 组队
    const option2 = document.getElementById('option-3');
    option2.addEventListener('click', function () {
   
      const popup = document.createElement('div');
      popup.style.position = 'fixed';
      popup.style.width = '275px';
      popup.style.top = '400px';
      popup.style.left = '50%';
      popup.style.transform = 'translate(-50%, -50%)';
      popup.style.padding = '20px';
      popup.style.backgroundColor = '#fff';
      popup.style.border = '1px solid #ccc';
      popup.style.borderRadius = '15px';
      popup.style.lineHeight = '1.7';
      popup.style.boxShadow = '0px 0px 5px 0px rgba(163, 163, 163, 0.5)';
      document.body.appendChild(popup);
      // 创建文字
      const text1 = document.createElement('div');
      text1.textContent = '加入我：';
      text1.style.marginBottom = '10px';
      popup.appendChild(text1);

      const text2 = document.createElement('div');
      text2.textContent = 'To do list暂未连数据库，如有感兴趣的前、后端同学，可以组队闲暇时光做些小工具。纯属兴趣。作者本职产品。';
      text2.style.marginBottom = '10px';
      popup.appendChild(text2);

      const text4 = document.createElement('div');
      text4.textContent = 'Email：2976016821@qq.com';
      text4.style.marginBottom = '-3px';
      popup.appendChild(text4);

      const text5 = document.createElement('div');
      text5.textContent = 'vx：ljyspenser';
      text5.style.marginBottom = '-3px';
      popup.appendChild(text5);

      const text6 = document.createElement('div');
      text6.textContent = '公众号 | 乔一门';
      text6.style.marginBottom = '20px';
      popup.appendChild(text6);

      // 创建按钮
      const button = document.createElement('button');
      button.textContent = '确定';
      button.style.backgroundColor = '#383838';
      button.style.color = '#fff';
      button.style.border = 'none';
      button.style.padding = '10px';
      button.style.display = 'block';
      button.style.margin = '0 auto';
      popup.appendChild(button);

      // 点击按钮关闭弹窗
      button.addEventListener('click', function () {
        document.body.removeChild(popup);
      });


      // 隐藏下拉选项
      settingsDropdown.classList.remove('show');
    });









    // 设置功能的icon1
    settingsIcon.addEventListener('click', function () {
      settingsDropdown.classList.toggle('show');
    });

    document.addEventListener('click', function (event) {
      if (!event.target.closest('#settings-icon1') && !event.target.closest('#settings-dropdown')) {
        settingsDropdown.classList.remove('show');
      }
    });



    addButton.addEventListener('click', addItem);
    newItemInput.addEventListener('keypress', function (event) {
      if (event.key === 'Enter') {
        addItem();

      }
    });

    function addItem() {
      const newItemText = newItemInput.value.trim();
      if (!newItemText) {
        return;
      }

      const newItem = {
        text: newItemText,
        timestamp: Date.now()
      };
      todoList.push(newItem);

      saveData();
      renderLists();

      newItemInput.value = '';


    }


    function renderLists() {// 计数函数
      renderList(todoListElement, todoList);
      renderList(completedListElement, completedList);
      completedItemCountElement.textContent = `- ${completedList.length}`;
      todoItemCountElement.textContent = todoList.length;

    }

    function renderList(listElement, items) {
      listElement.innerHTML = '';

      for (const item of items) {
        const li = document.createElement('li');
        const textSpan = document.createElement('span');
        const timeSpan = document.createElement('span');
        document.getElementById("completed-list").scrollTop = -document.getElementById("completed-list").scrollHeight;// 滚动到顶部


        textSpan.textContent = item.text;
        textSpan.style.cursor = 'pointer';

        timeSpan.textContent = new Date(item.timestamp)
          .toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })
          .replace(/\//g, '-')  // 将斜杠替换为点
        timeSpan.style.textAlign = "right";
        timeSpan.style.flexGrow = "1";


        textSpan.textContent = item.text;
        timeSpan.textContent = new Date(item.timestamp)
          .toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })
          .replace(/\//g, '-')  // 将斜杠替换为点
          .replace(' ', '  ');
        timeSpan.style.textAlign = 'right'; // 右对齐时间
        li.appendChild(textSpan);
        li.appendChild(timeSpan);

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.addEventListener('click', function () {
          deleteItem(item);
        });
        li.appendChild(deleteButton);

        if (listElement === todoListElement) {
          const completeButton = document.createElement('button');
          completeButton.textContent = '完成';
          completeButton.addEventListener('click', function () {
            completeItem(item);

          });

          li.appendChild(completeButton);


        }


        li.addEventListener('click', function () {// 复制一条数据
          if (event.target.tagName === 'SPAN') {
            const text = item.text;
            navigator.clipboard.writeText(text).then(function () {
              const toast = document.createElement('div');
              toast.textContent = '复制成功';
              toast.style.position = 'fixed';
              toast.style.top = '200px';
              toast.style.left = '50%';
              toast.style.transform = 'translateX(-50%)';
              toast.style.padding = '10px';
              toast.style.backgroundColor = '#333';
              toast.style.color = '#fff';
              toast.style.borderRadius = '5px';
              document.body.appendChild(toast);
              setTimeout(function () {
                document.body.removeChild(toast);
              }, 500);
            }, function () {
              console.error('复制失败');
            });
          }
        });


        listElement.prepend(li);

      }
    }

    function completeItem(item) {
      const index = todoList.indexOf(item);
      if (index > -1) {
        todoList.splice(index, 1);
      }
      completedList.push(item);
      saveData();
      renderLists();
      document.getElementById("completed-list").scrollTop = -document.getElementById("completed-list").scrollHeight;// 滚动到顶部
    }

    function deleteItem(item) {
      const todoIndex = todoList.indexOf(item);
      const completedIndex = completedList.indexOf(item);

      if (todoIndex > -1) {
        todoList.splice(todoIndex, 1);
      }

      if (completedIndex > -1) {
        completedList.splice(completedIndex, 1);
      }

      saveData();
      renderLists();
    }

    function saveData() {
      localStorage.setItem('todoList', JSON.stringify(todoList));
      localStorage.setItem('completedList', JSON.stringify(completedList));
    }

    function loadData() {
      const storedTodoList = localStorage.getItem('todoList');
      if (storedTodoList) {
        todoList = JSON.parse(storedTodoList);
      }

      const storedCompletedList = localStorage.getItem('completedList');
      if (storedCompletedList) {
        completedList = JSON.parse(storedCompletedList);
      }
    }

    loadData();
    renderLists();

  </script>
</body>

</html>